<template>
  <AdminLayout :title="`用户详情 - ${user.name}`" subtitle="查看用户信息和订单历史">
    
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <!-- 左侧：用户信息 -->
      <div class="lg:col-span-2 space-y-6">
        <!-- 基本信息 -->
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
          <div class="flex items-center justify-between mb-6">
            <h3 class="text-lg font-medium text-gray-900">基本信息</h3>
            <Link :href="route('admin.users.edit', user.id)" class="text-sm text-gray-600 hover:text-gray-900">
              编辑信息
            </Link>
          </div>

          <div class="space-y-4">
            <div class="flex items-center">
              <div class="w-16 h-16 rounded-full bg-gray-200 flex items-center justify-center mr-4">
                <span class="text-2xl font-medium text-gray-600">{{ user.name.charAt(0).toUpperCase() }}</span>
              </div>
              <div>
                <h4 class="text-xl font-medium text-gray-900">{{ user.name }}</h4>
                <p class="text-sm text-gray-500">用户ID: {{ user.id }}</p>
              </div>
            </div>

            <div class="grid grid-cols-2 gap-4 pt-4">
              <div>
                <label class="block text-sm font-medium text-gray-500 mb-1">邮箱</label>
                <p class="text-sm text-gray-900">{{ user.email || '-' }}</p>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-500 mb-1">手机号</label>
                <p class="text-sm text-gray-900">{{ user.phone || '-' }}</p>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-500 mb-1">生日</label>
                <p class="text-sm text-gray-900">{{ user.birthday || '-' }}</p>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-500 mb-1">邮箱验证</label>
                <span v-if="user.email_verified_at" class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                  已验证
                </span>
                <span v-else class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
                  未验证
                </span>
              </div>
            </div>

            <div v-if="user.bio" class="pt-4">
              <label class="block text-sm font-medium text-gray-500 mb-1">个人简介</label>
              <p class="text-sm text-gray-900">{{ user.bio }}</p>
            </div>

            <div class="pt-4 border-t border-gray-200">
              <div class="grid grid-cols-2 gap-4 text-sm">
                <div>
                  <span class="text-gray-500">注册时间：</span>
                  <span class="text-gray-900">{{ formatDate(user.created_at) }}</span>
                </div>
                <div>
                  <span class="text-gray-500">最后更新：</span>
                  <span class="text-gray-900">{{ formatDate(user.updated_at) }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 收货地址 -->
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
          <h3 class="text-lg font-medium text-gray-900 mb-4">收货地址</h3>
          <div v-if="user.addresses.length > 0" class="space-y-4">
            <div v-for="address in user.addresses" :key="address.id" class="p-4 border border-gray-200 rounded-lg">
              <div class="flex items-start justify-between">
                <div>
                  <div class="flex items-center gap-2 mb-2">
                    <span class="font-medium text-gray-900">{{ address.contact_name }}</span>
                    <span class="text-gray-600">{{ address.contact_phone }}</span>
                    <span v-if="address.is_default" class="px-2 py-0.5 text-xs bg-gray-900 text-white rounded">默认</span>
                  </div>
                  <p class="text-sm text-gray-600">
                    {{ address.province }} {{ address.city }} {{ address.district }} {{ address.address }}
                  </p>
                </div>
              </div>
            </div>
          </div>
          <p v-else class="text-sm text-gray-500">暂无收货地址</p>
        </div>

        <!-- 最近订单 -->
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
          <h3 class="text-lg font-medium text-gray-900 mb-4">最近订单</h3>
          <div v-if="recentOrders.length > 0" class="space-y-3">
            <div v-for="order in recentOrders" :key="order.id" class="flex items-center justify-between p-3 border border-gray-200 rounded-lg hover:bg-gray-50">
              <div class="flex-1">
                <div class="flex items-center gap-3">
                  <Link :href="route('admin.orders.show', order.id)" class="font-medium text-gray-900 hover:text-gray-600">
                    #{{ order.order_number }}
                  </Link>
                  <span class="px-2 py-0.5 text-xs rounded-full" :class="getStatusClass(order.status)">
                    {{ getStatusText(order.status) }}
                  </span>
                  <span class="px-2 py-0.5 text-xs rounded-full" :class="getPaymentStatusClass(order.payment_status)">
                    {{ getPaymentStatusText(order.payment_status) }}
                  </span>
                </div>
                <div class="mt-1 text-sm text-gray-500">
                  {{ formatDate(order.created_at) }} · {{ order.items_count }} 件商品
                </div>
              </div>
              <div class="text-right">
                <div class="font-medium text-gray-900">¥{{ order.total_amount.toLocaleString() }}</div>
              </div>
            </div>
          </div>
          <p v-else class="text-sm text-gray-500">暂无订单</p>
        </div>
      </div>

      <!-- 右侧：统计和操作 -->
      <div class="space-y-6">
        <!-- 订单统计 -->
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
          <h3 class="text-lg font-medium text-gray-900 mb-4">订单统计</h3>
          <div class="space-y-4">
            <div class="flex items-center justify-between">
              <span class="text-sm text-gray-600">总订单数</span>
              <span class="text-lg font-medium text-gray-900">{{ orderStats.total_orders }}</span>
            </div>
            <div class="flex items-center justify-between">
              <span class="text-sm text-gray-600">累计消费</span>
              <span class="text-lg font-medium text-gray-900">¥{{ orderStats.total_spent.toLocaleString() }}</span>
            </div>
            <div class="flex items-center justify-between">
              <span class="text-sm text-gray-600">进行中订单</span>
              <span class="text-lg font-medium text-gray-900">{{ orderStats.pending_orders }}</span>
            </div>
          </div>
        </div>

        <!-- 快捷操作 -->
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
          <h3 class="text-lg font-medium text-gray-900 mb-4">快捷操作</h3>
          <div class="space-y-3">
            <button
              @click="showResetPassword = true"
              class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
            >
              重置密码
            </button>
            <button
              @click="toggleEmailVerification"
              class="w-full px-4 py-2 text-sm text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
            >
              {{ user.email_verified_at ? '取消邮箱验证' : '标记邮箱已验证' }}
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 重置密码弹窗 -->
    <ConfirmDialog
      :show="showResetPassword"
      title="重置用户密码"
      @close="showResetPassword = false"
      @confirm="confirmResetPassword"
    >
      <div class="space-y-4">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">新密码</label>
          <input
            v-model="passwordForm.password"
            type="password"
            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-900"
            placeholder="请输入新密码"
          />
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">确认密码</label>
          <input
            v-model="passwordForm.password_confirmation"
            type="password"
            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-900"
            placeholder="请再次输入新密码"
          />
        </div>
      </div>
    </ConfirmDialog>
  </AdminLayout>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Link, router } from '@inertiajs/vue3'
import AdminLayout from '@/Layouts/AdminLayout.vue'
import ConfirmDialog from '@/Components/ConfirmDialog.vue'

const props = defineProps({
  user: { type: Object, required: true },
  orderStats: { type: Object, required: true },
  recentOrders: { type: Array, default: () => [] }
})

const showResetPassword = ref(false)
const passwordForm = reactive({
  password: '',
  password_confirmation: ''
})

const confirmResetPassword = () => {
  router.post(route('admin.users.reset-password', props.user.id), passwordForm, {
    onSuccess: () => {
      showResetPassword.value = false
      passwordForm.password = ''
      passwordForm.password_confirmation = ''
    }
  })
}

const toggleEmailVerification = () => {
  router.post(route('admin.users.toggle-email-verification', props.user.id), {}, {
    preserveScroll: true
  })
}

const formatDate = (dateString) => {
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

const getStatusText = (status) => {
  const statusMap = {
    pending: '待处理',
    processing: '处理中',
    shipped: '已发货',
    delivered: '已送达',
    cancelled: '已取消'
  }
  return statusMap[status] || status
}

const getStatusClass = (status) => {
  const classMap = {
    pending: 'bg-yellow-100 text-yellow-800',
    processing: 'bg-blue-100 text-blue-800',
    shipped: 'bg-purple-100 text-purple-800',
    delivered: 'bg-green-100 text-green-800',
    cancelled: 'bg-red-100 text-red-800'
  }
  return classMap[status] || 'bg-gray-100 text-gray-800'
}

const getPaymentStatusText = (status) => {
  const statusMap = {
    pending: '待支付',
    paid: '已支付',
    failed: '支付失败',
    refunded: '已退款'
  }
  return statusMap[status] || status
}

const getPaymentStatusClass = (status) => {
  const classMap = {
    pending: 'bg-yellow-100 text-yellow-800',
    paid: 'bg-green-100 text-green-800',
    failed: 'bg-red-100 text-red-800',
    refunded: 'bg-gray-100 text-gray-800'
  }
  return classMap[status] || 'bg-gray-100 text-gray-800'
}
</script>

